<template>
  <view class="student-info">
    <view class="wrap">
      <view class="title">基础信息</view>
      <view class="box">
        <view class="flex mb22">
          <view class="flex1">
            <view class="flex-between mb22">
              <view class="t">姓名</view>
              <view class="t1">阿达</view>
            </view>
            <view class="flex-between mb22">
              <view class="t">性别</view>
              <view class="t1">男</view>
            </view>
            <view class="flex-between mb22">
              <view class="t">籍贯</view>
              <view class="t1">您</view>
            </view>
            <view class="flex-between">
              <view class="t">出生日期</view>
              <view class="t1">2021-21-21</view>
            </view>
          </view>
          <image
            class="avatar"
            src="@/static/image/upload.png"
            mode="aspectFit"></image>
        </view>
        <view class="flex-between mb22">
          <view class="t">级</view>
          <view class="t1">2021级</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script></script>

<style lang="scss" scoped>
.student-info {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 26upx 32upx;
  background: #f6f6f6;
  .wrap {
    margin-bottom: 26upx;
    .title {
      font-weight: bold;
      font-size: 28rpx;
      color: #000000;
      margin-bottom: 18upx;
    }
    .box {
      background: #ffffff;
      border-radius: 24rpx 24rpx 24rpx 24rpx;
      padding: 34upx 24upx;
      .avatar {
        width: 144rpx;
        height: 192rpx;
        background: #f6f6f6;
        margin-left: 40upx;
      }
      .t {
        font-weight: bold;
        font-size: 24rpx;
        color: #000000;
      }
      .t1 {
        font-weight: 400;
        font-size: 24rpx;
        color: #000000;
      }
      .mb22 {
        margin-bottom: 22upx;
      }
      .mb72 {
        margin-bottom: 72upx;
      }
    }
  }
}
</style>
